<template>
  <div class="wrapper"
       v-loading.fullscreen.lock="loading">
    <my-pro :fixed="setting.fixed"
            :logo="logo"
            :title="title"
            :mode="setting.layout"
            :menus="menus"
            :menu-props="{router: true, uniqueOpened: true}"
            v-bind="colorTheme"
            :collapsible="setting.collapsible"
            :rainbow="setting.rainbow"
            :breadcrumb="createBreadcrumb"
            :tab="setting.tab ? createTab : null"
            :document-title="createDocumentTitle">

      <!-- 头部工具按钮 -->
      <template v-slot:actions>
        <UserAction :dropdown-items="dropdown"
                    :username="userInfo.username"
                    :extra="userInfo.role"
                    @command="handleUserCommand"
                    :avatar="{theme: 'primary'}"></UserAction>
        <IconAction icon="icon-exit-fill" @click="doLogout"></IconAction>
      </template>

      <!-- 加载子路由页面 -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </my-pro>
  </div>
</template>

<script>
import logo from '$ui/assets/logo.png'
import {MyPro} from '$ui'

import {SYSTEM_TITLE} from '@/constant'
import {saveUserToCache, removeTokenFromCache} from '@/helper/utils'
import {dynamicMenu} from '@/helper/dynamicMenu'
import {getSysUserInfo} from '$my/code/api/sys-user'
import {getSysMenuNav} from '$my/code/api/sys-menu'
import {postSysLogout} from '$my/code/api/sys-login'


const {IconAction, UserAction} = MyPro
export default {
  mixins: [],
  components: {
    MyPro,
    IconAction,
    UserAction
  },
  data() {
    return {
      loading: true,
      userInfo: {},
      setting: {
        skin: 'default',
        layout: 'sidebar',
        color: 'pro',
        fixed: true,
        collapsible: true,
        tab: true,
        breadcrumb: false,
        rainbow: true,
        invert: false
      },
      logo: logo,
      title: SYSTEM_TITLE,
      menus: [
        {
          icon: 'icon-debug',
          text: '首页',
          index: '/main'
        }
      ],
      dropdown: [
        {
          text: '个人信息',
          command: 'info'
        }
      ]
    }
  },
  computed: {
    colorTheme() {
      const {color, layout, skin} = this.setting
      const map = {
        simple: 'light',
        tech: 'dark',
        pro: 'gradual'
      }
      if (layout === 'sidebar') {
        return {
          sidebarTheme: map[color],
          navbarTheme: skin === 'dark' ? 'dark' : 'light'
        }
      }
      if (layout === 'navbar') {
        return {
          sidebarTheme: 'light',
          navbarTheme: map[color]
        }
      }

      if (layout === 'both') {
        return {
          navbarTheme: map[color],
          sidebarTheme: skin === 'dark' ? 'dark' : 'light'
        }
      }

      return {
        navbarTheme: 'light',
        sidebarTheme: 'light'
      }

    }
  },
  methods: {
    // 页面标题构建函数，可根据匹配的路由返回响应的标题名称
    createDocumentTitle(matched) {
      return matched.meta.title
        ? `${matched.meta.title}`
        : SYSTEM_TITLE
    },
    handleUserCommand(cmd) {
      switch (cmd) {
        case 'info':
          this.$router.push('/main/account')
          break
        case 'password':
          // this.$router.push('/account/settings')
          break
        case 'logout':
          this.doLogout()
          //   .then(r => {
          //   this.$access.logout()
          // })
          break
      }
    },
    createBreadcrumb() {
      if (!this.setting.breadcrumb) return null
      return this.$route.matched
        .filter(n => n.meta.title)
        .map(n => {
          return {
            label: n.meta.title,
            to: n.path || '/'
          }
        })
    },
    createTab(fullPath, matched) {
      if (!this.setting.tab) return null
      if (fullPath && matched) {
        const {icon, title, tab} = matched.meta
        if (title || tab) {
          return {
            label: tab || title,
            value: fullPath,
            path: matched.path,
            icon: icon,
            closable: fullPath !== '/main/'
          }
        }
        return null
      } else {
        // 缺省首页
        return {
          icon: 'el-icon-s-home',
          label: '首页',
          value: '/main/',
          closable: false
        }
      }
    },
    buildMenus(menuList) {
      const menus = dynamicMenu(menuList, this.$router)
      // menus.unshift({
      //   icon: 'icon-debug',
      //   text: '首页',
      //   index: '/main'
      // })
      this.menus = menus
    },
    doLogout() {
      postSysLogout().then(_ => {
        // 如果是注销登录，需要清除动态菜单生成标志
        this.$router.options.isAddDynamicMenuRoutes = false
        removeTokenFromCache()
        this.$access.logout()
      })
    },
    queryDictName() {

    }
  },
  created() {
    getSysUserInfo().then(res => {
      this.userInfo = res.user

      getSysMenuNav().then(res => {
        this.loading = false
        const menuList = res.menuList || []
        const permissions = res.permissions || []
        const userData = {
          user: this.userInfo,
          perms: permissions,
          menus: menuList
        }
        saveUserToCache(userData)
        this.buildMenus(menuList)
      })
    })

    this.queryDictName()
  },
  mounted() {


  }
}
</script>


